<template>
  <div class="battle" v-loading="loading">
    <div class="battle-peace">
      <div style="display: flex; justify-content: center; align-items: center">
        <div>
          <img
            src="../../static/img/set/justice.png"
            alt=""
            style="width: 14px; height: 14px"
          />
        </div>
        <div style="font-size: 14px; margin-left: 10px">公平性</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20px;
        "
      >
        <div>
          <img
            src="../../static/img/set/face.png"
            alt=""
            style="width: 14px; height: 14px"
          />
        </div>
        <div
          style="
            font-size: 14px;
            margin-left: 10px;
            color: rgba(170, 255, 84, 1);
          "
        >
          免费箱子
        </div>
      </div>
    </div>
    <div class="battle-scroll">
      <div class="battle-scroll-item" v-for="index in scrollCount" :key="index">
        <div>
          <img
            src="../../static/img/set/gun.png"
            alt=""
            style="width: 80px; height: 80px"
          />
        </div>
        <div>Crimson Terror</div>
      </div>
    </div>

    <div
      class="battle-title"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div
        class="left-section"
        style="display: flex; justify-content: center; align-items: center"
      >
        <div class="title-text">盒子对战</div>
        <div style="margin-left: 20px; margin-top: 5px">
          <!-- <img
            src="../../static/img/set/show.png"
            alt=""
            style="width: 20px; height: 20px"
          /> -->
          <el-tooltip placement="bottom">
            <template #content>
              <div
                style="
                  width: 352px;
                  height: 246px;
                  border-radius: 8px;
                  background: rgba(28, 28, 35, 1);
                  border: 1px solid rgba(65, 65, 82, 1);
                  padding: 10px;
                "
              >
                <div
                  style="
                    font-size: 16px;
                    font-weight: 600;
                    color: rgba(255, 255, 255, 1);
                    margin-bottom: 20px;
                  "
                >
                  游戏说明
                </div>
                <div
                  style="
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(161, 163, 183, 1);
                    overflow-y: auto;
                  "
                >
                  文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明
                </div>
              </div>
            </template>
            <img
              src="../../static/img/set/show.png"
              alt=""
              style="width: 20px; height: 20px"
            />
          </el-tooltip>
        </div>
      </div>

      <div
        @click="btnCreateBattleClick"
        style="
          width: 148px;
          height: 46px;
          border-radius: 8px;
          background: rgba(250, 100, 24, 1);
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div>
          <img
            src="../../static/img/set/append.png"
            alt=""
            style="width: 20ox; height: 20px"
          />
        </div>
        <div style="font-size: 18px; margin-left: 5px">创建游戏</div>
      </div>
    </div>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div class="battle-tabs">
        <div
          class="battle-tab"
          v-for="(tab, index) in tabs"
          :key="tab.name"
          :class="{ active: activeTab === index }"
          @click="handleClickTab(index)"
        >
          {{ tab.name }}
        </div>
      </div>
      <div
        class="battle-search"
        style="display: flex; justify-content: center; align-items: center"
      >
        <div class="dropdown" @click="toggleDropdown">
          <!-- 下拉框头部 -->
          <div class="dropdown-container">
            <!-- <img
              v-if="selectedOption && selectedOption.icon"
              :src="selectedOption.icon"
              class="icon-img"
            /> -->
            <div
              class="text"
              style="width: 27px; white-space: nowrap; text-overflow: ellipsis"
            >
              {{ selectedOption ? selectedOption.text : "最新" }}
            </div>
            <img alt="toggle" class="arrow-img" :src="isOpen ? up : down" />
          </div>

          <!-- 下拉内容 -->
          <div v-if="isOpen" class="dropdown-content">
            <div
              v-for="(option, index) in options"
              :key="index"
              @click.stop="selectOption(option)"
              class="dropdown-item"
            >
              <img
                :src="option.icon"
                class="item-icon"
                v-if="
                  typeof option.icon === 'string' &&
                  option.icon.includes('.png')
                "
              />
              <span class="item-text">{{ option.text }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="tab-container">
      <el-tabs v-model="activeTabNav" class="demo-tabs">
    <el-tab-pane label="全部" name="all"></el-tab-pane>
    <el-tab-pane label="进行中" name="in-progress"></el-tab-pane>
    <el-tab-pane label="等待中" name="waiting"></el-tab-pane>
    <el-tab-pane label="已结束" name="completed"></el-tab-pane>
    </el-tabs>
    </div> -->
    <div class="content" v-for="(item, index) in cardCount" :key="index">
      <div>
        <img
          src="../../static/img/set/Container.png"
          alt=""
          style=" width: 46px; height: 43px"
        />
      </div>
      <div class="content-img">
        <img
          v-for="(photo, index) in photoArray"
          :key="index"
          :src="photo"
          alt="照片"
          style="margin-right: 10px; width: 50px; height: 50px"
        />
      </div>
      <div style="display: flex; flex-direction: column; align-items: center">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div>
            <img
              src="../../static/img/set/waitTime.png"
              alt=""
              style="width: 15px; margin-right: 5px"
            />
          </div>
          <div
            style="
              font-size: 12px;
              color: rgba(29, 226, 88, 1);
              margin-top: -4px;
            "
          >
            等待中
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
            margin-left: 10px;
          "
        >
          <div
            v-for="(item, index) in renderCount"
            :key="index"
            class="match-card"
          >
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  margin-right: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  v-if="
                    !(
                      renderCount.length !== 4 &&
                      index === renderCount.length - 1
                    )
                  "
                >
                  <img
                    src="../../static/img/set/user.png"
                    alt="状态图标"
                    class="status-icon"
                    style="width: 28px; height: 28px"
                  />
                </div>

                <div
                  v-if="
                    renderCount.length !== 4 && index === renderCount.length - 1
                  "
                >
                  <img
                    src="../../static/img/set/add.png"
                    alt=""
                    style="width: 33px; height: 33px"
                  />
                </div>
                <div v-if="index !== renderCount.length - 1" class="vs">
                  <img
                    src="../../static/img/set/vs.png"
                    alt=""
                    style="width: 14px; height: 8px; margin-left: 10px"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img
          src="../../static/img/set/Vertical.png"
          alt=""
          style="width: 1px; height: 86px"
        />
      </div>
      <div
        style="display: flex; flex-direction: column; align-items: center"
        class="add-btn"
      >
        <div
          style="
            width: 181px;
            height: 46px;
            border-radius: 8px;
            background: rgba(255, 102, 25, 0.05);
            border: 1px solid rgba(255, 102, 25, 1);
            display: flex;
            justify-content: center;
            align-items: center;
          "
          class="add-watch"
        >
          观看
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5px;
          "
        >
          <div>
            <img
              src="../../static/img/set/coinx.png"
              alt=""
              style="width: 15px; margin-right: 10px; margin-top: 5px"
            />
          </div>
          <div style="font-size: 12px">46.86</div>
        </div>
      </div>
    </div>

    <!-- <div class="battle-box-list battle-scrollbar">
      <div style="display: flex; justify-content: center; align-items: center">
        <div class="battle-container">
          <div><img src="" alt="" /></div>
          <div>
            <img
              src="../../static/img/set/Container.png"
              alt=""
              style="width: 46px; height: 42px"
            />
          </div>
        </div>
        <div class="battle-input"><img src="" alt="" /></div>
        <div>
          <div>
            <div><img src="" alt="" /></div>
            <div>进行中</div>
          </div>
          <div>头像</div>
        </div>
        <div>
          <div>观看</div>
          <div>
            <div><img src="" alt="" /></div>
            <div>86.46</div>
          </div>
        </div>
      </div>
      <battle-box-item
        v-for="box in boxs"
        :key="box.id"
        :box="box"
        @click="handleClickBox(box)"
      ></battle-box-item> -->
    <!-- </div> -->

    <div class="d-flex flex-column flex-sm-row">
      <div
        class="rank"
        v-if="topThreeScoresYesterday.length >= 3 || runking.length"
      >
        <!-- 排行榜 -->
        <img
          class="rank-image rank-image-pc"
          src="@/static/img/battle/rank.png"
        />
        <img
          class="rank-image rank-image-mobile"
          src="@/static/img/battle/rank-mobile.png"
        />

        <div class="d-flex flex-row flex-sm-column">
          <div class="battle-top3" v-if="topThreeScoresYesterday.length === 3">
            <div class="battle-top3-title">昨日三甲</div>

            <div class="battle-top3-detail">
              <battle-top3-item
                v-for="(user, i) in topThreeScoresYesterday"
                :key="user.user_id"
                :level="i === 0 ? 2 : i === 1 ? 1 : 3"
                :user="user"
              ></battle-top3-item>
            </div>
          </div>

          <!-- 今日积分排行 -->
          <div class="battle-integral-ranking" @click.stop>
            <div class="battle-integral-ranking-title">
              <img src="@/static/img/battle/trophy.png" />
              今日积分排行
            </div>

            <div class="battle-integral-ranking-list">
              <div
                class="battle-runking-list-wrapper"
                :class="{ 'show-more': showMoreRunking }"
              >
                <battle-rank-item
                  v-for="(runk, i) in runking"
                  :key="runk.user_id"
                  :runk="runk"
                  :number="i"
                ></battle-rank-item>

                <div
                  class="ranking-user-more"
                  v-show="runking.length >= 5"
                  @click="showMoreRunking = !showMoreRunking"
                >
                  {{ showMoreRunking ? "收起" : "查看更多" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="flex: 1">
        <div class="battle-header">
          <!-- tab -->
          <!-- <div class="battle-tabs">
            <div
              class="battle-tab"
              v-for="(tab, index) in tabs"
              :key="tab.name"
              :class="{ active: activeTab === index }"
              @click="handleClickTab(index)"
            >
              {{ tab.name }}
            </div>
          </div> -->

          <!-- 说明 -->
          <!-- <div class="battle-header-right">
            <div @click="openRuleDialog">
              <img src="@/static/img/battle/icon-rule.png" />
              活动规则
            </div>
            <div @click="handleToHistory">
              <img src="@/static/img/battle/icon-history.png" />
              历史记录
            </div>
            <div @click="showCreateRoom = true" style="color: #8e7eed">
              <img src="@/static/img/battle/icon-create.png" />
              创建房间
            </div>
          </div> -->
        </div>
        <div>
          <BoxCardFour />
        </div>

        <!-- 列表 -->
        <div class="battle-room-list">
          <battle-room
            v-for="(room, index) in roomList"
            :detail="room"
            :key="index"
          ></battle-room>
        </div>
      </div>
    </div>

    <create-room
      v-model="showCreateRoom"
      @close="showCreateRoom = false"
    ></create-room>
    <skin-list-dialog ref="skinListDialog"></skin-list-dialog>
    <battle-rule ref="battleRuleRef"></battle-rule>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onBeforeUnmount,
  computed,
  onMounted,
  onUnmounted,
} from "vue";
import BattleBoxItem from "./components/BattleBoxItem.vue";
import BattleRoom from "./components/BattleRoom.vue";
import BattleRankItem from "./components/BattleRankItem.vue";
import BattleTop3Item from "./components/BattleTop3Item.vue";
import { useTabs } from "./services";
import CreateRoom, { Box } from "./components/CreateRoom/CreateRoom.vue";
import { useBattleList } from "./services";
import BoxService from "@/services/BoxService";
import { processImageUrl } from "@/utils";
import SkinListDialog from "./components/SkinListDialog.vue";
import { useRouter } from "vue-router";
import BattleRule from "./components/BattleRule.vue";
import { ElTabs, ElTabPane } from "element-plus";
import BoxCardFour from "@/views/csgo/BoxCardFour.vue";
import wait from "@/static/img/set/wait.png";
import up from "@/static/img/set/up.png";
import down from "@/static/img/set/down.png";
export default defineComponent({
  setup() {
    const { tabs, activeTab } = useTabs();
    const battleListInfo = useBattleList();
    const boxs = ref<Box[]>([]);
    const skinListDialog = ref<any>();
    const showMoreRunking = ref(false);
    const router = useRouter();
    const battleRuleRef = ref<any>();
    const activeTabNav = ref("all");
    const collapseRunking = () => {
      showMoreRunking.value = false;
    };
    const photoArray = ref([wait, wait]);
    const playerCount = ref(3); // 可以改为 3 或 4
    const renderCount = computed(() => {
      return Array.from({ length: playerCount.value }, (_, i) => i);
    });
    const showCards = ref(4);
    const cardCount = computed(() => {
      return Array.from({ length: showCards.value }, (_, i) => i);
    });
    const scrollCards = ref(20);
    const scrollCount = computed(() => {
      return Array.from({ length: scrollCards.value }, (_, i) => i);
    });
    const showTooltip = ref(false);
    const targetDiv = ref(null);
    const isOpen = ref(false);
    const selectedOption = ref(null);
    // 下拉选项数据（含图标和文本）
    const options = [
      { text: "最新" },
      { text: "最早" },
      { text: "价格最高优先" },
      { text: "价格最低优先" },
    ];
    function toggleDropdown() {
      isOpen.value = !isOpen.value;
    }

    function selectOption(option) {
      selectedOption.value = option;
      isOpen.value = false; // 选择后关闭下拉
    }

    const getBoxTypes = () => {
      return BoxService.allType({
        type: 1,
      }).then((response) => {
        const { data } = response;
        return data.data;
      });
    };
    let observer;

    onMounted(() => {
      if (targetDiv.value) {
        observer = new IntersectionObserver(
          ([entry]) => {
            showTooltip.value = entry.isIntersecting;
          },
          {
            rootMargin: "0px",
            threshold: 0.1,
          }
        );

        observer.observe(targetDiv.value);
      }
    });

    onUnmounted(() => {
      if (observer) {
        observer.disconnect();
      }
    });
    const getBoxs = (id: number) => {
      return BoxService.list({
        type_id: id,
        page: 1,
        page_size: 999,
        box_type: 1,
      }).then((response) => {
        const { list, total } = response.data.data;
        return list.map((item) => ({
          ...item,
          img: processImageUrl(item.img),
        }));
      });
    };

    const getBoxList = () => {
      return getBoxTypes().then((response) => {
        return Promise.all(response.map((type) => getBoxs(type.id))).then(
          (res) => (boxs.value = res.flat())
        );
      });
    };

    onBeforeMount(() => {
      getBoxList();
      window.addEventListener("click", collapseRunking);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("click", collapseRunking);
    });

    return {
      tabs,
      activeTab,
      boxs,
      showMoreRunking,
      ElTabs,
      ElTabPane,
      activeTabNav,
      photoArray,
      renderCount,
      cardCount,
      isOpen,
      selectedOption,
      options,
      toggleDropdown,
      selectOption,
      up,
      down,
      scrollCount,
      scrollCards,
      showTooltip,
      targetDiv,

      handleClickTab(index: number) {
        if (index === activeTab.value) return;
        activeTab.value = index;
        battleListInfo.getRoomList(tabs[index].value);
      },

      handleClickBox(box: Box) {
        skinListDialog.value.open(box.id, box.name);
      },

      handleToHistory() {
        router.push("/battle/history");
      },

      openRuleDialog() {
        battleRuleRef.value.open();
      },
      btnCreateBattleClick() {
        router.push("/battle/createBattle");
      },

      showCreateRoom: ref(false),
      skinListDialog,
      battleRuleRef,

      ...battleListInfo,
    };
  },

  components: {
    BattleBoxItem,
    BattleRoom,
    BattleRankItem,
    BattleTop3Item,
    CreateRoom,
    SkinListDialog,
    BattleRule,
    BoxCardFour,
  },
});
</script>

<style scope lang="scss">
.battle {
  width: 1300px;
  margin: 55px auto 0 auto;
  background: rgba(23, 23, 28, 1);
  margin-top: 0px;
  .battle-peace {
    display: flex;
    justify-content: start;
    align-items: center;
    background: rgba(0, 0, 0, 1);
    margin-bottom: 25px;
  }
  .battle-scroll {
    // background: black;
    margin-bottom: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    max-width: 100%; /* 或者设置为具体像素值，比如 width: 600px; */
    min-width: 0; /* 防止 flex 容器撑开 */
    overflow-x: auto; /* 关键：允许横向滚动 */
    overflow-y: hidden; /* 隐藏纵向滚动 */
    white-space: nowrap; /* 可选：防止换行 */
    scroll-behavior: smooth; /* 可选：平滑滚动 */
    -webkit-overflow-scrolling: touch; /* 支持 iOS 滚动流畅 */
    .battle-scroll-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 164px;
      height: 120px;
      margin-right: 5px;
      flex-shrink: 0;
      background: rgba(28, 28, 35, 1);
    }
  }
  .battle-title {
    text-align: center;
    margin-bottom: 31px;
    font-size: 30px;
    position: relative;
    .left-section {
      .tooltip-trigger {
        margin-left: 20px;
        position: relative;
        cursor: pointer;

        &::after {
          content: "文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明";
          position: absolute;
          top: 25px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #333;
          color: #fff;
          padding: 6px 12px;
          border-radius: 4px;
          font-size: 14px;
          white-space: nowrap;
          z-index: 100;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          opacity: 0;
          transition: opacity 0.2s ease-in-out;
          pointer-events: none;
          max-width: 200px;
          white-space: normal;
          min-height: 40px;
          line-height: 1.5;
        }

        &:hover::after {
          opacity: 1;
        }
      }
    }
  }

  .content {
    width: 100%;
    height: 106px;
    border-radius: 14px;
    background: rgba(28, 28, 35, 1);
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 10px;
    overflow: hidden;
    .content-img {
      width: 700px;
      height: 74px;
      border-radius: 8px;
      background: rgba(24, 24, 29, 1);
      display: flex;
      justify-content: start;
      align-items: center;
      margin-left: 5px;
    }
    .add-btn {
      position: relative;
      add-watch {
        position: relative;
        width: 181px;
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background: rgba(255, 102, 25, 0.05);
        border: 1px solid rgba(255, 102, 25, 1);
        overflow: hidden;
      }

      .add-watch::before,
      .add-watch::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      /* 悬停时显示“加入”和背景色 */
      .add-watch:hover::after {
        content: "加入";
        background: rgba(250, 100, 24, 1);
        color: white;
        z-index: 2;
        opacity: 1;
        width: 181px;
        height: 46px;
      }
    }
  }
  .battle-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 67px;
    width: 464px;
    height: 48px;
    opacity: 1;
    border-radius: 6px;
    background: #20202b;
    margin-bottom: 20px;

    .battle-tab {
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 16px;
      margin-right: 40px;
      // border-bottom: 2px solid transparent;
      // padding-bottom: 13px;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        color: #fff;
        left: 4px;
        top: 71px;
        width: 80px;
        height: 40px;
        opacity: 1;
        border-radius: 4px;
        background: #2b2c38;
        // border-bottom-color: #8e7eed;
        // color: #8e7eed;
      }
    }
  }
  .battle-search {
    .dropdown {
      position: relative;
      width: 150px;
      font-family: Arial, sans-serif;
      .dropdown-container {
        display: flex;
        align-items: center;
        background-color: #2c2c2c;
        padding: 8px 16px;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        height: 46px;

        .icon-img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
        .icon {
          margin-right: 8px;
          font-size: 16px;
        }

        .text {
          font-size: 14px;
        }

        .arrow-img {
          width: 16px; /* 示例宽度 */
          height: 9px; /* 示例高度 */
          margin-left: 74px;
          transition: transform 0.3s ease;
        }

        .arrow-up {
          transform: rotate(180deg);
        }
      }

      .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #2c2c2c;
        border-radius: 4px;
        overflow: hidden;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        color: white;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }

        .item-icon {
          margin-right: 8px;
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .battle-room-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;

    > div {
      margin-right: 12px;
      margin-bottom: 12px;
    }
  }

  .rank {
    width: 320px;
    flex: none;
    margin-right: 32px;

    .rank-image-mobile {
      display: none;
    }

    .rank-image {
      width: 100%;
    }

    .battle-top3 {
      .battle-top3-title {
        text-align: center;
        color: #e5cf9b;
        font-size: 22px;
        margin: 30px 0 20px 0;
        text-shadow: -1px 0 0 rgb(255 255 255 / 50%);
      }

      .battle-top3-detail {
        display: flex;
        align-items: flex-end;
      }
    }

    .battle-integral-ranking-title {
      font-size: 20px;
      color: #f8f8f8;
      margin: 30px 0 20px 0;
      display: flex;
      align-items: center;
      text-shadow: -1px 0 0 rgb(255 234 0 / 50%);

      img {
        width: 24px;
        margin-right: 10px;
      }
    }

    .battle-integral-ranking-list {
      padding: 24px 16px;
      background: #28253b;
      border-radius: 8px;

      .ranking-user-more {
        display: none;
      }
    }
  }

  .battle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .battle-header-right {
      display: flex;
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.4);

      > * {
        margin-right: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;

        &:last-child {
          margin-right: 0;
        }
      }

      img {
        width: 20px;
        margin-right: 6px;
      }
    }
  }
}
</style>


